<template>
  <div class="container">
    <el-row :gutter="30"  style="margin-bottom:15px" type="flex" justify="space-between">
      <el-col :span="4">
        <el-card shadow="never">
          行业数量：{{tradeCount}}
        </el-card>
      </el-col>
      <el-col :span="4" >
        <el-button type="success" style="margin-top:10px" @click="showDialog=true">新增行业</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="firmName"
        label="行业名称">
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序">
      </el-table-column>
      <el-table-column
        label="操作">
        <template #default="{row}">
          <el-button size="small" type="primary" @click="update(row.id)">编辑</el-button>
          <el-button size="small" type="danger" @click="removeTrade(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog width="600px" title="标题" :visible="showDialog" @close="cancel">
      <el-form label-width="120px" ref="tradeForm" :model="tradeDate" :rules="rules">
        <el-form-item  label="行业名称" prop="firmName" >
          <el-input style="width:80%" v-model="tradeDate.firmName" />
        </el-form-item>
        <el-form-item label="排序" prop="sort" >
          <el-input  style="width:80%" v-model.number="tradeDate.sort" />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button  type="success" size="small" @click="submitTrade">提交</el-button>
          <el-button size="small" @click="cancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getTradeList, addTrade, removeTrade, updateTrade, getTrade } from '@/api/storeManage'
export default {
  data () {
    return {
      tableData: [],
      showDialog: false,
      tradeDate: {
        firmName: '',
        sort: ''
      },
      rules: {
        firmName: [{ required: true, message: '行业名称不能为空', tigger: 'blur' },
          { min: 2, max: 8, message: '行业名称只能是2-6个字符', tigger: 'blur' }],
        sort: [{ required: true, type: 'number', message: '行业排序不能为空', tigger: 'blur' },
          { min: 1, max: 100, type: 'number', message: '排序只能是1-100', tigger: 'blur' }]
      }
    }
  },
  methods: {
    async update (id) {
      this.showDialog = true
      const res = await getTrade(id)
      this.tradeDate = res[0]
    },
    async getTradeList () {
      this.tableData = await getTradeList()
    },
    submitTrade () {
      this.$refs.tradeForm.validate().then(async data => {
        if (this.tradeDate.id) {
          await updateTrade({ ...this.tradeDate })
        } else {
          await addTrade(this.tradeDate)
        }
        this.showDialog = false
        this.getTradeList()
        this.$message.success('成功')
      })
    },
    cancel () {
      this.tradeDate = {}
      this.$refs.tradeForm.resetFields()
      this.showDialog = false
    },
    async removeTrade (id) {
      await this.$confirm('确定删除这个行业吗？')
      await removeTrade(id)
      this.$message.success('删除行业成功')
      this.getTradeList()
    }
  },
  computed: {
    tradeCount () {
      return this.tableData.reduce((sum) => { return ++sum }, 0)
    }
  },
  created () {
    this.getTradeList()
  }
}
</script>

<style>

</style>
